<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 文本样式综合设计 */
        .highlight{
            color: #ffe600;
            background-color: hwb(0 0% 100%);
            text-transform: uppercase;
            text-indent: 20px;
        }
        .highlight:hover{
            color: #ffffff;
            background-color: #747474;
        }
        /* 文本排版设计 */
        .article p {
            color: #747474;
            font-size: 16px;
            line-height: 1.5;
            text-indent: 1em;
        }
        .article p::first-letter{
            font-size: 24px;
            font-weight:bold;
        }
        /* 文本对齐和装饰 */
        .poem{
            text-align:justify; /* 两端对齐 */
            color: #192eee;
            text-transform: capitalize;
        }
        .poem::first-line{
            color: #a10505;
        }
        /* 文本样式响应式设计 */
        .news{
            
        }
    </style>
</head>
<body>
    <!-- 文本样式综合设计 -->
  <p class="highlight">这是一段需要高亮显示的文本。</p>
    <!-- 文本排版设计 -->
  <article class="article">
    <p>这是文章的第一段。</p>
    <p>这是文章的第二段。</p>
  </article>
    <!-- 文本对齐和装饰 -->
  <div class="poem">
      这是一首诗。每个字都充满了情感，每个词都蕴含着深意。<br>
      这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
    </div>
    <!-- 文本样式响应式设计 -->
  <div class="news">
      这是一条新闻。请根据屏幕宽度调整文本样式。
    </div>
</body>
</html>